

.filter-select {
  margin-right: 5px;
  height: 36px;
  min-width: 200px;

  &.filter-select-has-value > .filter-select__control {
    border: 1px solid var(--blue-primary);
    svg {
      color: var(--blue-primary);
    }
  }

  .filter-select__control {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;

    background: #FFFFFF;
    border: 1px solid var(--gray-300);
    border-radius: 2px;

    &:hover {
      border: 1px solid var(--blue-primary);
    }

    &.filter-select__control--is-focused {
      border: 1px solid var(--blue-primary);
      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.06), 0px 0px 0px 1px rgba(104, 113, 130, 0.16), 0px 0px 0px 4px rgba(34, 100, 229, 0.15);
    }

    .filter-select__value-container, .filter-select__indicators {
      display: flex;
      align-items: center;
      height: inherit;

      div, span {
        margin-right: 5px;
        padding: 0;
      }

      .filter-select__indicator {
        cursor: pointer;
      }

      .filter-select__single-value {
        height: fit-content;
      }
    }

    .filter-select__input {
      display: flex !important;
      align-items: center;
      height: 24px;

      input {
        padding: 0;
        line-height: 26px;
      }
    }

    .selected-count-indicator-container {
      padding: 4px;
      width: 24px;
      height: 21px;
      background: var(--blue-500);
      border-radius: 15px;

      .selected-count-indicator-inner {
        font-size: 11px;
        line-height: 13px;
        margin: 0;
        color: #FFFFFF;
      }
    }
  }

  &__menu {
    background: #FFFFFF;
    color: var(--blue-700);

    box-shadow: 0px 0px 0px 1px rgba(152, 161, 179, 0.1), 0px 15px 35px -5px rgba(17, 24, 38, 0.2), 0px 5px 15px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
  }

  &__custom-option > div {
    padding: 5px;
    background: #FFFFFF;
    color: var(--blue-700);

    box-shadow: 0px 0px 0px 1px rgba(152, 161, 179, 0.1), 0px 15px 35px -5px rgba(17, 24, 38, 0.2), 0px 5px 15px rgba(0, 0, 0, 0.08);
    border-radius: 4px;

    .option-label {
      max-width: 500px;
      overflow-x: hidden;
      text-overflow: ellipsis;
    }

    .filter-select__option--is-selected {
      background: #FFFFFF;
      color: var(--blue-700);
    }

    .filter-select__option--is-focused {
      cursor: pointer;
      background: var(--blue-200);
    }
  }

  &__placeholder {
    white-space: nowrap;
  }

  &__dropdown {
    background: #FFFFFF;
    box-shadow: 0px 0px 0px 1px rgba(152, 161, 179, 0.1), 0px 15px 35px -5px rgba(17, 24, 38, 0.2), 0px 5px 15px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    position: absolute;
    z-index: 3;
    min-width: 150px;
  }
}
